<template>
    <div class="qiye">
        <div class="title2">
            <div>【企业认证详情】</div>

            <div v-if="isrenzhen == '0'" style="color: blue;font-size: 15px;">您的企业认证待审核，请耐心等候</div>
            <div v-if="isrenzhen == '1'" style="color: green; font-size: 15px;">您的企业认证已通过</div>
            <div v-if="isrenzhen == '2'" style="color: red;font-size: 15px;">您的企业认证已被驳回，请重新提交</div>
            <div v-if="isrenzhen == '3'" style="color: red;font-size: 15px;">您的企业认证审核中，请耐心等候</div>
            <span style="margin-left: 5px;" class="tooltip-span" v-if="isrenzhen=='1' || isrenzhen=='2'">
                <i class="el-icon-chat-dot-round"></i>
                <div class="tooltip-box">
                   审批意见:{{ detail.approvalOpinion }}
                </div>
            </span>
        </div>


        <div class="ruzhuForm">
            <el-form label-position="top" ref="detail" :model="detail" :rules="rules" :disabled="isrenzhen != '2'">
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="企业名称" prop="qyName">
                            <el-input v-model="detail.qyName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
                            <el-input v-model="detail.unifiedSocialCreditCode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="联系人姓名" prop="contactName">
                            <el-input v-model="detail.contactName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="联系人手机号" prop="phone">
                            <el-input v-model="detail.phone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="联系人邮箱" prop="email">
                            <el-input v-model="detail.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="form-item2">
                        <el-form-item label="办公地区" prop="officeAddress" required>
                            <el-select v-model="province" @change="Province" placeholder="">
                                <el-option label="兰州市" value="兰州市"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin-top: 50px;" prop="officeAddress">
                            <el-select v-model="city" @change="City" placeholder="">
                                <el-option label="城关区" value="城关区"></el-option>
                                <el-option label="七里河区" value="七里河区"></el-option>
                                <el-option label="西固区" value="西固区"></el-option>
                                <el-option label="安宁区" value="安宁区"></el-option>
                                <el-option label="红古区" value="红古区"></el-option>
                                <el-option label="永登县" value="永登县"></el-option>
                                <el-option label="皋兰县" value="皋兰县"></el-option>
                                <el-option label="榆中县" value="榆中县"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="企业办公详细地址" prop="officeDetailAddress">
                            <el-input v-model="detail.officeDetailAddress"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" class="form-item">
                        <el-form-item label="营业执照" prop="fileId">
                            <div class="deleteImg" v-for="(item, index) in imgList()" :key="index">
                                <img v-if="isrenzhen == '0' || isrenzhen == '1' || isrenzhen == '3'"
                                    style="width: 150px;height: 150px; margin-right: 10px;" :src="worker + item" alt="">
                            </div>
                            <el-upload :class="{ hide: hideUpload }" v-if="isrenzhen == '2'"
                                :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" list-type="picture-card"
                                :headers="{ Authorization: token }" :data="{ userId: formData.userId }" :on-success="upload"
                                :limit="5" :on-change="ChangeImage" :file-list="fileImg" :on-exceed="handleExceed"
                                :on-remove="handDelete" accept="image/jpeg,image/jpg,image/png">
                                <i class="el-icon-plus"></i>
                            </el-upload>

                            <!-- <el-dialog   :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                        <i class="el-icon-circle-close"></i>
                                    </el-dialog> -->
                        </el-form-item>
                        <div class="zhizhao">1.请确保图片大小小于3M，图片格式为：JPG，jpeg或PNG</div>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="固定电话" prop="fixedLinePhone">
                            <el-input v-model="detail.fixedLinePhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="企业网站" prop="qyUrl">
                            <el-input v-model="detail.qyUrl"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="form-item2">
                        <el-form-item label="注册地区" prop="officeRegisterAddress" required>
                            <el-select v-model="zhuceprovince" @change="zcProvince" placeholder="">
                                <el-option label="兰州市" value="兰州市"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin-top: 50px;" prop="officeRegisterAddress">
                            <el-select v-model="zhucecity" @change="zcCity" placeholder="">
                                <el-option label="城关区" value="城关区"></el-option>
                                <el-option label="七里河区" value="七里河区"></el-option>
                                <el-option label="西固区" value="西固区"></el-option>
                                <el-option label="安宁区" value="安宁区"></el-option>
                                <el-option label="红古区" value="红古区"></el-option>
                                <el-option label="永登县" value="永登县"></el-option>
                                <el-option label="皋兰县" value="皋兰县"></el-option>
                                <el-option label="榆中县" value="榆中县"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="注册详细地址" prop="officeDetailRegisterAddress">
                            <el-input v-model="detail.officeDetailRegisterAddress"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="tableFoot">
                <button v-if="isrenzhen == 2" @click="submit()">修改认证</button>
            </div>
        </div>
    </div>
</template>

<script>
import { renzheng_reset, renzheng_detail, user_renzheng, deletefileId } from '../../api/api'
import { http } from '@/until/http';
export default {
    data() {
        return {
            https: http,
            dialogVisible: false,
            dialogImageUrl: '',
            token: localStorage.getItem('token'),
            formData: {
                contactName: '',
                email: '',
                file: [],
                officeAddress: '',
                fixedLinePhone: '',
                officeDetailAddress: '',
                officeDetailRegisterAddress: '',
                officeRegisterAddress: '',
                phone: '',
                qyName: '',
                qyUrl: '',
                unifiedSocialCreditCode: '',
                userId: this.$store.state.userId,
            },
            detail: {},
            province: '',
            city: '',
            zhuceprovince: '',
            zhucecity: '',
            rules: {
                qyName: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' },
                ],
                unifiedSocialCreditCode: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
                ],
                contactName: [
                    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入联系人手机号', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                officeAddress: [
                    { required: true, message: '请选择企业办公地区', trigger: 'change' },
                ],
                officeDetailAddress: [
                    { required: true, message: '请输入企业办公详细地址', trigger: 'blur' },
                ],
                file: [
                    { required: true, message: '请上传营业执照', trigger: 'blur' },
                ],
                officeRegisterAddress: [
                    { required: true, message: '请选择正确的注册地区', trigger: 'blur' },
                ]
            },
            isrenzhen: '',
            fileId: [],
            worker: "http://gxj.lanzhou.gov.cn:8829/zxqyfw/pub/fileUploadRecord/preview?fileId=",
            fileImg: [],
            hideUpload: false
        };
    },
    created() {

        renzheng_detail({ id: this.$store.state.userId }).then((res) => {
            if (res.data.state == '20000') {
                this.detail = res.data.data
                this.fileId = [res.data.data.fileId]
                this.detail.fileId = [this.detail.fileId.split(',')]
                this.detail.fileId[0].forEach((item) => {
                    let obj = {
                        fileId: item,
                        url: this.worker + item,
                        name: 'qy.jpg',
                    }
                    console.log(this.fileImg.length);
                    if (this.fileImg.length <= 5) {
                        this.fileImg.push(obj)
                        this.hideUpload = true
                    }
                    if (this.fileImg.length <= 4) {
                        this.hideUpload = false
                    }

                    //   this.detail.fileId[0].push(obj)
                })
                this.imgList()
                console.log(this.detail);
            }
            this.province = this.detail.officeAddress.slice(0, 3)
            this.city = this.detail.officeAddress.slice(3, this.detail.officeAddress.length)
            this.zhuceprovince = this.detail.officeRegisterAddress.slice(0, 3)
            this.zhucecity = this.detail.officeRegisterAddress.slice(3, this.detail.officeRegisterAddress.length)
        })
        user_renzheng({ id: this.$store.state.userId }).then((res) => {
            if (res.data.state == '20000') {
                this.isrenzhen = res.data.data.authentication_state
            }
        })
    },
    methods: {
        // 认证详情
        open() {
            this.$alert(this.detail.approvalOpinion, '认证详情', {
                confirmButtonText: '确定'
            });
        },
        //回显图片列表
        imgList() {
            if (this.fileId[0]) {
                return this.fileId[0].split(',')
            }
        },
        ChangeImage(file, fileList) {
            this.hideUpload = fileList.length >= 5
        },
        submit() {
            this.$refs.detail.validate(isok => {
                if (isok) {
                    delete this.detail.approvalStatus;
                    delete this.detail.approvalOpinion;
                    delete this.detail.approvalTime;
                    delete this.detail.approver;
                    this.detail.file = this.detail.fileId.join(',')
                    console.log(this.detail.fileId);
                    renzheng_reset(this.detail).then((res) => {
                        if (res.data.state == '20000') {
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                            });
                            this.$router.push('/homepage');
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                }
            })

        },
        upload(res) {
            this.detail.fileId[0].push(res.data)
            console.log(this.detail.fileId[0]);
        },
        Province() {
            this.detail.officeAddress = this.province + this.city;
        },
        City() {
            this.detail.officeAddress = this.province + this.city;
        },
        zcProvince() {
            this.detail.officeRegisterAddress = this.zhuceprovince + this.zhucecity;
        },
        zcCity() {
            this.detail.officeRegisterAddress = this.zhuceprovince + this.zhucecity;
        },
        handleExceed() {

            this.$message.warning('只能上传5张图片');
        },
        handDelete(file, fileList) {

            // deletefileId({fileId:file.fileId}).then((res)=>{
            //     console.log(res);
            // })
            if (file.fileId) {
                console.log(file, fileList);
                var index = this.detail.fileId[0].indexOf(file.fileId)
                if (index !== -1) {
                    this.detail.fileId[0].splice(index, 1)
                }
                console.log(this.detail.fileId[0]);
                this.ChangeImage(0, this.formData.file.length)
            } else if (file.response.data) {
                console.log(file.response.data, this.detail.fileId[0]);
                var index = this.detail.fileId[0].indexOf(file.response.data.toString())
                console.log(index);
                if (index !== -1) {
                    this.detail.fileId[0].splice(index, 1)
                }
                console.log(this.detail.fileId[0]);
                this.ChangeImage(0, this.formData.file.length)
            }
        }

    },
    components: {
    }
}
</script>


<style  lang="scss" scoped>
 .tooltip-span {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .tooltip-span:hover .tooltip-box {
    display: block;
  }

  .tooltip-box {
    text-align: center;
    display: none;
    position: absolute;
    top: -10px;
    left: 20px;
    width: 200px;
    // padding: 10px;
    // background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }
::v-deep .hide .el-upload--picture-card {
    display: none;
}

.form-item2 {
    display: flex;
    align-items: center;
}

.deleteImg {
    position: relative;

    i {
        position: absolute;
        top: 3%;
        right: 8%;
        z-index: 999;
        color: white;
        font-size: 20px;
    }
}

::v-deep .el-form-item__content {
    display: flex;
}

.title2 {
    width: 100%;
    height: 40px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
    line-height: 40px;
    margin: 20px 0px;
    display: flex;

    div:nth-of-type(2) {
        color: red;
        font-size: 13px;
    }
}

.el-select .el-input__inner {
    width: 200px;
}

.el-input {
    width: 400px;
}

.el-select {
    width: 200px !important;

}

.zhizhao {
    width: 800px;
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #D50000;
    margin: 10px;
}

.ruzhu {
    width: 100%;
    display: flex;
    justify-content: center;

    .ruzhuBox {
        width: 1220px;
        height: 100%;
        background: #FFFFFF;
        margin: 30px;
    }
}

.ruzhuBox {
    width: 1220px;
    height: 100%;
    background: #FFFFFF;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px 50px;

    .title {
        display: flex;

        div:nth-of-type(1) {
            width: 120px;
            height: 50px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #262626;
            line-height: 50px;
            margin-bottom: 20px;
            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(2) {
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 50px;
            margin-right: 5px;

            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(3) {
            width: 189px;
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 50px;

            border-bottom: 4px #1285D7 solid;

        }

    }


}

.name {
    width: 208px;
    height: 45px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FD8544;
}

.text,
.iconDownload {
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
}

.el-table__header {
    background-color: #1285D7 !important;
    color: white;
}

::v-deep .el-table__header th.is-leaf,
::v-deep .el-table__header th.gutter {
    background-color: #1285D7 !important;
    color: white;
    font-size: 16px;
}

.status {
    width: 48px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #D62502;
}

.el-button--primary {
    background-color: #fd8544;
    border-color: #fd8544;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.tableFoot {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;

    button {
        margin: 0px 10px;

        &:hover {
            cursor: pointer;
        }
    }

    button:nth-of-type(1) {
        width: 98px;
        height: 40px;
        background: #2797E8;
        border: 0;
        border-radius: 3px 3px 3px 3px;
        color: white;
    }

    button:nth-of-type(2) {
        width: 98px;
        height: 40px;
        background: #F39200;
        border-radius: 3px 3px 3px 3px;
        border: 0;

        color: white;
    }

    button:nth-of-type(3) {
        width: 98px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 3px 3px 3px 3px;
        color: white;
        border: 0;
    }
}
</style>